
function displayTitlePanel()
{
	var panel;
	panel = document.getElementById('titlePanel');
	panel.style.display = "block";
}

function hideTitlePanel()
{
	var panel;
	panel = document.getElementById('titlePanel');
	panel.style.display = "none";
}


//click outside this div will make this window go away
var mouse_is_inside = false;
$(document).ready(function()
{
    $('#titlePanel').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('#titlePanel').hide();
    });
});


$(window).load(function() {
	
	var theImage = $('ul li img');
	var theWidth = theImage.width();	 
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
		
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});
	
	$(document).keydown(function(e){
	    var keyCode = e.keyCode || e.which;
	    if (keyCode == 38) 
	    { 
	       alert( "Up arrow key hit." );
	       return;
	    }
	    if (keyCode == 40) 
	    { 
	       alert( "Down arrow key hit." );
	       return;
	    }
	    if (keyCode == 37) 
	    { 
	       alert( "Left arrow key hit." );
	       return;
	    }
	    if (keyCode == 39) 
	    { 
	       alert( "Right arrow key hit." );
	       return;
	    }
	 
	});
	
	$(theImage).each(		
		function(intIndex){				
				$(this).nextAll('a')
				.bind("click", function()
						{
					if($(this).is(".next") )	{
						$(this).parent('li').parent('ul').animate({
							"margin-left": (-(intIndex + 1) * theWidth)				
						}, 1000)			
						} 
					else if($(this).is(".previous")){
					
						$(this).parent('li').parent('ul').animate({
							"margin-left": (-(intIndex - 1) * theWidth)				
						}, 1000)	
					}
					else if($(this).is(".startover")){
						
						$(this).parent('li').parent('ul').animate({
							"margin-left": (0)				
						}, 1000)
					}
				});									 
	});	 					
});

   